<template>
  <el-dialog v-model="show" :show-close="false" destroy-on-close>
    <div class="clear-container">
      <i class="iconfont icon-qingkong"></i>
      <div>确认清理所有任务么？</div>
    </div>
    <div class="checkbox-warpper">
      <el-checkbox class="checkbox" v-model="onlyDeleteDone"></el-checkbox>
      <span>仅删除已完成任务～</span>
    </div>
    <div class="footer">
      <el-button size="small" @click="close" round class="cancle">
        误操作~
      </el-button>
      <el-button
        size="small"
        type="warning"
        round
        @click="confirm"
        class="confirm"
      >
        确定了~
      </el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, defineEmits, defineExpose } from "vue";
const show = ref(false);
const onlyDeleteDone = ref(true);
const $emit = defineEmits(["confirm"]);
const open = () => {
  show.value = true;
};
const close = () => {
  show.value = false;
};
const confirm = () => {
  $emit("confirm", onlyDeleteDone.value); // 发生事件给父组件
  show.value = false;
};
defineExpose({ open }); // 暴露给父组件使用(关键)
</script>

<style scoped>
.clear-container {
  display: flex;
  font-size: 14px;
  align-items: center;
  justify-content: center;
  color: #1a2a3a;
  margin-top: 15px;
}
.checkbox-warpper {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #5a6a7a;
  margin-top: 10px;
}
.checkbox {
  display: contents;
  margin-right: 10px;
}
.checkbox-warpper > span {
  margin-left: 5px;
  font-size: 12px;
}
.icon-qingkong {
  margin-right: 6px;
}
.cancle {
  color: #9f9c9c;
}
.confirm {
  background-color: #4ea30a !important;
  border: 0;
}
.footer {
  display: flex;
  margin-top: 20px;
  justify-content: center;
}
</style>
